import React, { Component } from 'react';
import moment from "moment";
import icon from '../../../assets/images/icon.png';
import './prove.less';
import $$ from "cmn-utils";
class ProveDom extends Component {
    state = {
        lessonData:[],
        total:0
    }
    componentDidMount(){
        if (!this.props.record.uid) return;
        if (!this.props.record.id) return;
            $$.post('/api/statistics/lectureUserReport',{uid:this.props.record.uid,lessonId:this.props.record.id,pageNo:1,pageSize:9999}).then(item => {
                if ( item.data && item.data.records ) {
                    this.setState({
                        lessonData:item.data.records
                    })
                }
            })
    }
    render(){
        const item = this.props.record;
        const bodycontent={
            'width':' 100vw',
            // 'height':'100vh',
            // 'overflow':'hidden',
            // 'page-break-after':'avoid'
        }
        const pstyle={
            'font-size':'20px',
            'line-height':' 30px',
            'margin-top':'20px',
        }
        const pstyle2={
            'font-size':'20px',
            'line-height':' 30px',
            'margin-top':'50px',
            'text-align':'center'
        }
        const tablestyle={
            'margin-top':'20px',
            'width':'100%',
            'text-align':'center',
            'font-size':'20px',
            'line-height':' 30px',
        }
        const trstyle={
            'width':'100%',
        }
        const bottomstyle={
            'position':' absolute',
            'bottom':'0',
            'right':'10px',
            'width':'200px',
            'height':' 200px',
            'overflow':' hidden',
        }
        const bpstyle={
            'line-height':' 200px',
            'position':' relative',
            'top':'-200px',
            'text-align':' center',
        }
        const h4style={
            'width':'100%',
            'text-align':' center',
            'font-size':'30px',
            'margin-bottom':'20px',
            'padding-top':'50px',
        }
        const iconImgstyle = {
            'float':'right',
            'width':'200px',
            'height':' 200px',
        }
        return(
            
            <div className="bodycontent" style={bodycontent}>
                <h4 style={h4style}>数恒职业教育服务平台学时证明</h4>
                <p style={pstyle}>{item.realname}({item.idCard})同学:</p>
        <p style={pstyle}>于&nbsp;{moment.utc(item.createTime).format('YYYY-MM-DD HH:mm')}&nbsp;至&nbsp;{moment.utc(item.lastLoginTime).format('YYYY-MM-DD HH:mm')}&nbsp;，参加了&nbsp;{item.className}&nbsp;培训，累计完成&nbsp;{item.finishHours?item.finishHours:0}&nbsp;学时课程学习。</p>
                {
                  this.state.lessonData.length === 0 &&
                    <p style={pstyle2}>暂无课次数据</p>
                }
                {
                  this.state.lessonData.length !== 0 &&
                  <table className="tg" border="1" style={tablestyle} cellpadding="0" cellspacing="0">
                  <thead>
                      <tr style={trstyle}>
                          <td>课次名称</td>
                          <td>课时</td>
                      </tr>
                  </thead>
                  <tbody>
                      {
                          this.state.lessonData.map(itemes => {
                              return  <tr style={trstyle}>
                              <td >{itemes.lectureName}</td>
                              <td>{itemes.lectureDuration}</td>
                          </tr>
                          })
                      }
                 
                  </tbody>
                  </table>
                }
                
                    <div className="bottom" style={bottomstyle}>
                        <img src={icon} className="iconImg" style={iconImgstyle}></img>
                        <p style={bpstyle}>
                            {moment.utc(new Date()).format('YYYY年MM月DD日')}
                        </p>
                    </div>
            </div>
        )
    }
}
export default ProveDom;